import { useCallback } from 'react';
import ChartsItem from '../../../components/chartsItem';
import { getSimpleData } from '../../../api/data';

const DataWare = () => {
  const createSimpleDataOption = useCallback((data) => ({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        data: data.map((item) => item.x),
        axisTick: {
          alignWithLabel: true,
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
      },
    ],
    series: [
      {
        name: 'Direct',
        type: 'bar',
        barWidth: '60%',
        data: data.map((item) => item.val),
      },
    ],
  }), [])
  return (
    <ChartsItem getData={getSimpleData} createData={createSimpleDataOption} />
  )
}
export default DataWare;
